<template>
    <div class="components-box">
        <Card title="基础组件">
            <div class="box">
                <draggable tag="ul" :list="baselist" @end="enddrag('base',$event)" :group="{name: 'content',pull:'clone'}" pull="clone" :sort="false" :disabled="draggableStatus">
                    <li v-for="(item,index) in baselist" :key="index"><Button   :class="bgcolorname" type="dashed">{{item.name}}</Button></li>
                </draggable>
            </div>
        </Card>

        <Card title="容器组件" class="components-card">
            <div class="box">
                <draggable tag="ul" :list="layoutlist" @end="enddrag('layout',$event)" :group="{name: 'content',pull:'clone'}" pull="clone" :sort="false" :disabled="draggableStatus">
                    <li v-for="(item,index) in layoutlist" :key="index"><Button   :class="bgcolorname" type="dashed">{{item.name}}</Button></li>
                </draggable>
            </div>
        </Card>
      <Card title="表单组件" class="components-card">
        <div class="box">
          <draggable tag="ul" :list="seniorlist" @end="enddrag('senior',$event)" :group="{name: 'content',pull:'clone'}" pull="clone" :sort="false" :disabled="draggableStatus">
            <li v-for="(item,index) in seniorlist" :key="index"><Button   :class="bgcolorname" type="dashed">{{item.name}}</Button></li>
          </draggable>
        </div>
      </Card>
    </div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
    components: { draggable },
    data() {
        //这里存放数据
        return {
            bgcolorname: '',
            colorLists: [],
            baselist: this.$store.state.baselist,
            seniorlist: this.$store.state.seniorlist,
            layoutlist: this.$store.state.layoutlist
        };
    },
    //监听属性 类似于data概念
    computed: {
        draggableStatus() {
            return this.$store.state.draggableStatus
        }
    },
    //监控data中的数据变化
    watch: {},
    //方法集合,
    methods: {
        enddrag(type,e) {

            if(e.to.id == 'configbox'){
                if(type == 'base'){
                    this.baselist = JSON.parse(JSON.stringify(this.baselist))
                    this.baselist[e.oldIndex]['id'] = parseInt(Math.random()*100000)
                }else if(type == 'senior'){
                    this.seniorlist = JSON.parse(JSON.stringify(this.seniorlist))
                    this.seniorlist[e.oldIndex]['id'] = parseInt(Math.random()*100000)
                }else if(type == 'layout'){
                    this.layoutlist = JSON.parse(JSON.stringify(this.layoutlist))
                    this.layoutlist[e.oldIndex]['id'] = parseInt(Math.random()*100000)
                }

            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {

      this.colorLists = this.$myapi.json('colorLists');

      var now = new Date();

      var day = now.getDate();
      day = day%15;

      let thisday = this.colorLists[day];

      this.bgcolorname = 'bg-'+thisday.name;

    }
}
</script>
<style lang='less' scoped>
.title {
    font-size: 14px !important;
}
.components-box{
    height:100vh;
    width: 320px;
    overflow-y: scroll;
}
.components-box::-webkit-scrollbar {
    display: none;
}
.box {
    padding: 0px;

    ul li {
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
    }
}
.components-card{
    margin-top: 15px;
}
</style>
